<style type="text/css">
.chara-con input {
	vertical-align: top;
}

.chara-con .chara-label {
	outline: 0;
	font: 12px/1.5 Arial,sans-serif;
	display: inline;
	float: left;
	height: 26px;
	padding: 0 9px;
	margin: 5px 5px 0 0;
	background-color: #fff;
	border: 1px solid #ccc;
	color: #666;
	line-height: 24px;
	white-space: nowrap;
	text-decoration:none;
}

.chara-con .chara-label.cur {
	border-color: #ffe8cd;
	background-color: #fff6eb;
	color: #f2824a;
}

.addfood-box {
	float: left;
	margin: 0 5px 0 0;
	position: relative;
	z-index: 18;
	zoom: 1;
}

.chara-con .addfood-box {
	top: 7px;
}

.chara-con .addtag {
	padding: 0 2px;
	border: 1px solid #e0e0e0;
	width: 90px;
	height: 26px;
	line-height: 26px;
	background: url(http://si1.s1.dpfile.com/s/c/app/review/i/shop/inpu-bg.a699fc101b354e217ce0eb380b9e80a8.png) no-repeat;
	position: relative;
	z-index: 29;
	top: -2px;
}
</style>

<style type="text/css">
.user {
  position: relative;
}
.complete-list {
  position: absolute;
  top: 100%;
  left: 0px;
  right: 15px;
  display: none;
  z-index: 10;
  max-height: 150px;
  overflow: auto;
  background-color: #fff;
  border: 1px solid #ccc;
}
.complete-list li {
  padding: .4em;
  border-bottom: 1px solid #e9e9e9;
}
.complete-list li:last-of-type {
  border-bottom: none;
}
.complete-list li:hover {
  background-color: #eee;
}
.complete-list .brand-name {
  font-weight: 500;
}
</style>

<form action="" class="form-horizontal" role="form">

	<div class="form-group">
	    <label class="col-sm-2 control-label">品牌列表</label>
	    <div class="col-sm-9 chara-con">
	    	
	    </div>
	</div>

	<div class="form-group">
		<div class="col-sm-offset-2 col-sm-8">
			<input type="hidden" name="brand" id="tgVals" value="" >
			<input type="hidden" name="id" value="{$id}" />
			<button type="submit" class="btn btn-primary" data-before-callback="before_callback" data-loading-txt="提交中，请稍后……" data-ajax-url="__CONTROLLER__/saveBrand">保存更改</button>
		</div>
	</div>
	
</form>

<script type="text/javascript">
function initSearchBox() {
  // 选择用户
  $( ".addtag" ).on( "keyup focus", function() {
    var v = $( this ).val();
    $.post( "{:U('ProductBrand/getBrandList', 'cls_id='.$id)}", {"name": v}, function(data) {
      data.extra && showBrandList( data.extra );
    });
  });
  
  $( ".addtag" ).on( "blur", function() {
    $( "#complete-list" ).slideUp();
  });
  
  // 显示检索出的用户列表
  function showBrandList( list ) {
    var html = "";
    for(var i = 0; item = list[i]; i++) {
      html += "<li data-name='"+ item.name +"' data-id='" + item.id + "'><span class='complete-list'>" + item.name + "</span><i class='brand-name'>" + item.name + "</i></li>";
    };
    $( "#complete-list" ).html( html ).slideDown();
  };
  
  // 点击选择检索出的列表
  $( "#complete-list" ).delegate( "li", "click", function() {
	  tags.addItems( { 'name':$(this).attr( "data-name" ), 'id':$(this).attr( "data-id" ) } );
  });
}
</script>

<script type="text/javascript">
var data = {$productBrandJSON};

function tags( cfg ) {
	  this.init( cfg );
}

tags.prototype.init = function( cfg ) {
  this.cfg = cfg;
  $(".chara-con").delegate("a","click",function() {
	  var _this = this;
	  $(".chara-con a").each(function() {
		  if( $(this).hasClass('cur') && $(this).get(0) == _this) {
			 cfg['editable'] && $(this).attr('contenteditable', true).focus();
		  } else $(this).removeClass("cur");
	  });
	  $(this).addClass("cur").focus();
  }).delegate("a", "keyup", function( event ) {
	    var keycode = event.which;
	    if (keycode == 46) {
	    	for(var o in cfg['data'] ) {
	    		if(cfg['data'][o]['id']==$(this).data('data')['id']) {
	    			delete cfg['data'][o];
	    			$(this).remove();
	    		}
	    	}
	    }
  });
  $(".chara-con").append("<div class=\"addfood-box\"><input class=\"addtag form-default\" type=\"text\" placeholder=\"搜索品牌\" autocomplete=\"off\" maxlength=\"20\" name=\"\"><ul class=\"complete-list\" id=\"complete-list\"></ul></div>");
  var data = cfg['data']; cfg['data'] = [];
  for( var o in data) {
	  this.addItems(data[o]);
  }
  initSearchBox();
}

tags.prototype.addItems = function( tag ) {
	var cfg = this.cfg;
	if ( !tag ) return false;
	for(var o in cfg['data'] ) {
		if( cfg['data'][o].id == tag.id ) {
			return false;
		}
	}
	$(".addfood-box").before(this.cfg['tpl'].replace("{{label}}", tag.name)).prev().blur(function() {
		cfg['editable'] && $(this).attr('contenteditable', false);
		 $(this).removeClass("cur");
    }).data('data', tag);
	this.cfg['data'].push( tag );
}

function before_callback() {
	var i = 0;
	var t = "";
	for(var i=0; i<tags.cfg['data'].length; i++) {
		if( tags.cfg['data'][i] ) {
			t+=tags.cfg['data'][i].id;
			if( i === tags.cfg['data'].length - 1 ) break;
			t+=',';
		}
	}
	$("#tgVals").val(t);
}

$(function() {
	window.tags = new tags({
		'tpl' : "<a class=\"chara-label\" href=\"javascript:;\">{{label}}</a>",
		'data' : data,
		'editable' : false,
	});
});

</script>